<!--
 * @Author: yangfan 1437446666@qq.com
 * @Date: 2023-03-07 14:08:11
 * @LastEditors: yangfan 1437446666@qq.com
 * @LastEditTime: 2023-03-08 18:13:26
 * @FilePath: \s_2006A_shixun\src\components\upload\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <a-layout-content>
    <a-upload-dragger
      v-model:fileList="state.fileDetail"
      name="file"
      action="https://creationapi.shbwyz.com/api/file/upload?unique=0"
      :headers="headers"
      :multiple="true"
      @change="handleChange"
      @beforeUpload="beforeUpload"
    >
      <div v-if="url">
        <slot :dataUrl="state.dataUrl" name="ossurl">
          <a-image :width="400" v-model:src="state.dataUrl" :fallback="url" style="object-fit: cover;" />
        </slot>
      </div>
      <div v-else>
        <p class="ant-upload-drag-icon">
          <inbox-outlined></inbox-outlined>
        </p>
        <p class="ant-upload-text">点击选址文件或将文件拖拽到此处</p>
        <p class="ant-upload-hint">文件将上传到oss,如未配置请先配置</p>
      </div>
    </a-upload-dragger>
  </a-layout-content>
</template>

<script lang="ts">
interface FileItem {
  uid: string
  name?: string
  status?: string
  response?: string
  url?: string
}
interface FileInfo {
  file: FileItem
  fileList: FileItem[]
}
import { defineComponent, reactive } from 'vue'
import { InboxOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import Cookie from 'js-cookie'
export default defineComponent({
  props: {
    url: {
      type: String
    }
  },
  components: {
    InboxOutlined
  },
  name: 'UploadVis',
  setup(props, context) {
    const state = reactive({
      //图片信息，
      fileDetail: [],
      //上传图片拿到的地址
      dataUrl: ''
    })
    //请求头
    const token = Cookie.get('token')
    //上传图片监听
    const handleChange = async (info: any) => {
      // const res = await Upload(info.file)
      // console.log(info)
      const status = info.file.status
      if (status !== 'uploading') {
        // console.log(info.file, info.fileList)
      }
      if (status === 'done') {
        message.success(`${info.file.name} 上传成功`)
        const { data } = info.file.response

        context.emit('initializeRendering', data.url)
        state.dataUrl = data.url
      } else if (status === 'error') {
        message.error(`${info.file.name} file upload failed.`)
      }
    }
    const beforeUpload = (file) => {
      // const {file} = file.
    }
    return {
      state,
      handleChange,
      beforeUpload,
      headers: {
        authorization: 'Bearer ' + token
      }
    }
  }
})
</script>
<style></style>
